<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="img" :src="image">
      </van-swipe-item>
    </van-swipe>
    <ul class="good">
      <li @click="tese">特色课</li>
      <li @click="oto">一对一辅导</li>
      <li  @click="time">学习日历</li>
    </ul>
    <Data></Data>
    <Footer></Footer>
    <Zhezhao></Zhezhao>
   

  </div>
</template>
<script>

  //轮播--按需引入
  import { Swipe, SwipeItem } from 'vant';
  import Zhezhao from "./zhezhao"
  import Data from "./data"
  import Footer from "./Footer"
  import axios from "axios"

  export default {
    name: 'Home',
    components: {
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,

      Zhezhao,
      Data,
      Footer,
    },
    data() {
      return {
        sms:"",
        images: [
          "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019LnKumseuhw1569839569.jpg",
          "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20197Cxc53hktC1569839552.jpg",
          "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20193KAjU2cB6h1569839562.jpg"
        ]
      }
    },
    methods:{
      tese(){
         this.$router.push("/lesson")
      },
      oto(){
        this.$router.push("/oto")
      },
      time(){
        this.$router.push("/time")
      }
    }
  }
</script>
<style>
  .home {
    background: #EEEEEE;
  }

  .img {
    width: 100%;
  }
  .good {
    position: absolute;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .good li {
    text-align: center;
    border-radius: 5px;
    background: #fff;
    width: 28%;
    height: 100px;
    line-height: 100px;
    margin: 5px;
    position: relative;
    margin-top: -70px;
     display: flex; 
    justify-content: center; 
    align-items: center;
    flex-direction: column; 
  } 
</style>